import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Row, Col, Card, Form, Spin, Tag, message } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './RoomDetail.less';

@connect(state => ({
  meetingRoom: state.meetingRoom,
}))
@Form.create()
export default class TableList extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    const { params } = this.props.match;
    const roomID = params.id;

    if (isNaN(roomID) || !roomID) {
      message.info('会议室ID不合法');
      dispatch(routerRedux('/meeting-room/room-list'));
    }

    // get meeting info
    dispatch({
      type: 'meetingRoom/fetch',
      payload: roomID,
    });
  }

  render() {
    const { response, loading } = this.props.meetingRoom;
    const roomData = response.data;
    // "data": {
    //   "id": 2,
    //   "space_name": "西安创新设计中心",
    //   "room_name": "西安创新设计中心3层大礼堂",
    //   "cover": "https://blhd.1demo.com/%E7%8E%AF%E5%A4%A7%E5%A4%A7%E7%A4%BC%E5%A0%82.png",
    //   "big": 1,
    //   "address": "西安创新设计中心3F",
    //   "people": "400人",
    //   "price": "",
    //   "label": "沙龙 讲座 发布会 报告会",
    //   "item": "LED 无线麦",
    //   "created_at": "2017-07-07 12:00:00",
    //   "updated_at": "0000-00-00 00:00:00"
    // }
    const roomRow = data => (
      <div className={styles.roomInfo}>
        <Row gutter={16}>
          <Col span={8}>
            <p>场地名称：</p>
            <p>{data.room_name}</p>
          </Col>
          <Col span={8}>
            <p>场地地址：</p>
            <p>{data.address}</p>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={8}>
            <p>容纳人数：</p>
            <p>{data.people}</p>
          </Col>
          <Col span={8}>
            <p>管理员联系方式：</p>
            <p>{data.contact || '暂无'}</p>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={8}>
            <p className={styles.label}>
              配套设备：
            </p>
          </Col>
          <Col span={8}>
            {roomSupporting(data.item)}
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={8}>
            <p className={styles.label}>
              场地备注说明：
            </p>
            {data.label}
          </Col>
        </Row>
      </div>
    );

    const roomSupporting = (itemList) => {
      const curItem = itemList.split('  ');
      return curItem.map((cur) => {
        return (
          <Tag>{cur}</Tag>
        );
      });
    };

    return (
      <PageHeaderLayout title="会议室详情">
        <Card title="会议室详情" bordered={false}>
          {loading || !roomData ? (
            <Spin />
          ) : (
            <Row gutter={24}>
              <Col span={16}>
                {roomRow(roomData)}
              </Col>
              <Col span={8}>
                <img src="imageUrl" alt={roomData.name} />
              </Col>
            </Row>
          )}
        </Card>
      </PageHeaderLayout>
    );
  }
}
